<template>
  <div>
    <el-card class="box-card" :style="'width:' + width + '%; overflow: auto'">
      <!-- seletedId:{{ seletedId }},checkedId:{{ checkedId }} -->
      <div
        v-for="item in mediaData"
        :key="item.id"
        class="picturesBox"
        @click="checkedMedia(item)"
      >
        <el-image :src="item.path" style="width: 100px; height: 100px">
        </el-image>
        <span class="del" v-if="isShowDelIcon" @click.stop="delMedia(item)" style="cursor: pointer;">
          <slot name="default">
            <span >x</span>
          </slot>
        </span>
        <div class="overspread" v-if="isShowOverspread && item.id == seletedId">
          <i class="el-icon-check"></i>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: 100,
    },
    mediaData: {
      type: Array,
      default: [],
    },
    isShowDelIcon: {
      type: Boolean,
      default: false,
    },
    isShowOverspread: {
      type: Boolean,
      default: false,
    },
    checkedId: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      seletedId: 0,
    };
  },
  methods: {
    checkedMedia(item) {
      this.seletedId = item.id;
      this.$emit("click", item);
      this.$emit("update:checked-id", this.seletedId);
    },
    delMedia(item) {
      this.$emit("delMedia", item);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  display: flex;
  flex-wrap: wrap;
  .picturesBox {
    position: relative;
    margin: 20px;
    .del {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15px;
      height: 15px;
      background: #000;
      color: #fff;
      border-radius: 10px;
      position: absolute;
      top: -7px;
      right: -7px;
      text-align: center;
    }
    .overspread {
      position: absolute;
      inset: 0;
      // top: 0;
      // bottom: 0;
      // left: 0;
      // right: 0;
      background: rgba(0, 0, 0, 0.4);
      font-size: 30px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>